import { useEffect } from "react";
import * as echarts from 'echarts';

type Props = {
    id: string;
    xData: string[];
    yData?: number[];
    smooth?: boolean;
    itemStyle?: Charts.ItemStyle;
    areaStyle?: Charts.AreaStyle;
    title?: string;
    titleConfig?: Charts.TitleConfig;
    grid?: Charts.grid;
    horizontal?: boolean;
    series?: Charts.Serie[];
    tooltip?: Charts.ToolTip;
};

export default (props: Props) => {
    const {
        id,
        xData,
        yData,
        smooth,
        itemStyle,
        areaStyle,
        title,
        titleConfig,
        grid,
        horizontal,
        series,
        tooltip,
    } = props;

    useEffect(() => {
        const chartDom = document.getElementById(id);
        const chart = echarts.init(chartDom);
        const option = {
            title: titleConfig ? titleConfig : title ? { show: true, text: title } : undefined,
            tooltip: tooltip || {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985',
                    },
                },
            },
            grid: grid || {
                left: '0%',
                right: '0%',
                top: '3%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: horizontal ? {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#999',
                        
                    },
                },
                axisTick: {
                    show: false,
                },
            } : {
                type: 'category',
                boundaryGap: false,
                data: xData,
                axisLine: {
                    lineStyle: {
                        color: '#999',
                        
                    },
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: horizontal ? {
                type: 'category',
                data: xData,
                axisLine: {
                    lineStyle: {
                        color: '#999',
                        
                    },
                },
                axisTick: {
                    show: false,
                },
            } : {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#999',
                        
                    },
                },
                axisTick: {
                    show: false,
                },
            },
            series: series || [
                {
                    data: yData,
                    type: 'line',
                    smooth,
                    itemStyle: itemStyle || {
                        color: '#1876ff',
                    },
                    areaStyle: areaStyle || undefined,
                }
            ],
        };
        chart.setOption(option);

        const resizeHandler = () => {
            chart?.resize();
        };
        window.addEventListener('resize', resizeHandler);
        return () => {
            window.removeEventListener('resize', resizeHandler);
        }
    }, [JSON.stringify(props)]);

    return (<div id={id} style={{ width: '100%', height: '100%' }} />);
}